<nz-card>
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">搜索词</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入搜索词" [(ngModel)]="searchParams.searchWord" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">搜索框</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择搜索框" [(ngModel)]="searchParams.searchBox">
            <ng-container *ngFor="let option of searchInputOptions">
              <nz-option
                [nzLabel]="option.label"
                [nzValue]="option.value">
              </nz-option>
            </ng-container>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">状态</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择状态" [(ngModel)]="searchParams.state">
            <nz-option nzLabel="启用" [nzValue]="0"></nz-option>
            <nz-option nzLabel="禁用" [nzValue]="1"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableParams.loading" (click)="queryData()">查询</button>
          <button nz-button nzType="default" (click)="resetData()">重置</button>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card class="m-t-2">
  <div class="operation p-b-10">
    <button nz-button nzType="primary" (click)="updateModal(0)">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      新建
    </button>
  </div>

  <div class="table-wrap pagination-wrap-position">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="90px">ID</th>
          <th nzAlign="center" nzWidth="250px">搜索词</th>
          <th nzAlign="center">适用搜索框</th>
          <th nzAlign="center" nzWidth="150px">状态</th>
          <th nzAlign="center" nzWidth="200px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- ID -->
          <td nzAlign="center">{{ data.id }}</td>
          <!-- 搜索词 -->
          <td nzAlign="center" nzBreakWord>{{ data.searchWord || '-' }}</td>
          <!-- 适用搜索框 -->
          <td nzAlign="center">
            <div *ngIf="data.searchBox;else templateHas">
              <ng-container *ngIf="data.searchBox === '0';else templateTag">
                <ng-container *ngFor="let tag of searchInputOptions">
                  <nz-tag nzColor="success" class="m-t-2 m-b-2">{{ tag.label }}</nz-tag>
                </ng-container>
              </ng-container>
              <ng-template #templateTag>
                <ng-container *ngFor="let tag of searchInputOptions">
                  <nz-tag *ngIf="data.searchBox.includes(tag.value)" nzColor="processing" class="m-t-2 m-b-2">{{ tag.label }}</nz-tag>
                </ng-container>
              </ng-template>
            </div>

            <ng-template #templateHas>-</ng-template>
          </td>
          <!-- 状态 0：启用 1：禁用 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.state == 0 ? '#008000' : '#FF0000'}">
              {{ data?.state == 0 ? '启用' : '禁用' }}
            </span>
          </td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button nz-button nzType="link" (click)="updateModal(1, data)">编辑</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 新建 | 编辑 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  [nzTitle]="modalItem ? '编辑' : '新增'"
  (nzOnCancel)="isVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label nzSpan="4" nzRequired>搜索词</nz-form-label>
          <nz-form-control nzSpan="20" nzErrorTip="请输入搜索词!">
            <input nz-input maxlength="20" placeholder="请输入搜索词" formControlName="searchWord" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="4">搜索框</nz-form-label>
          <nz-form-control nzSpan="20">
            <div>
              <div style="border-bottom: 1px solid rgb(233, 233, 233);" class="p-b-5 m-b-10">
                <label
                  nz-checkbox
                  [ngModelOptions]="{standalone: true}"
                  [(ngModel)]="allChecked"
                  (ngModelChange)="updateAllChecked()"
                  [nzIndeterminate]="indeterminate"
                >
                  全选
                </label>
              </div>
              <nz-checkbox-group [ngModelOptions]="{standalone: true}" [(ngModel)]="searchInputOptions" (ngModelChange)="updateSingleChecked()"></nz-checkbox-group>
            </div>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="4" nzRequired>状态</nz-form-label>
          <nz-form-control nzSpan="20" nzErrorTip="请选择状态!">
            <nz-radio-group formControlName="state">
              <label nz-radio [nzValue]="0">启用</label>
              <label nz-radio [nzValue]="1">禁用</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="4">备注</nz-form-label>
          <nz-form-control nzSpan="20">
            <nz-textarea-count [nzMaxCharacterCount]="100">
              <textarea rows="4" nz-input maxlength="100" placeholder="请输入备注" formControlName="remarks"></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="submitLoading" (click)="updateSubmitForm()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 新建 | 编辑 -->